<template>
  <div class="home_r">
    <div v-if="!isShow" class="flex_unit">
      <div class="hc_tit">您理想中的事业是什么样子的？</div>
      <div class="qe_tit">
        请从下面选出<span>5项</span>事业选择的常见原因进行评分：
      </div>
      <div class="an_wrap">
        <!-- <div
          class="an_unit"
          v-for="(item, index) in list"
          @click="seleBtnFn(item)"
          :key="index"
        >
          <button class="btn_unit" :class="item.isChecked ? 'active' : ''">{{ item.val }}</button>
        </div> -->
        <ul class="unit_list">
          <li
            v-for="(item, index) in list"
            @click="seleBtnFn(item)"
            :class="item.isChecked ? 'active' : ''"
            :key="index"
          >
            {{ item.val }}
          </li>
        </ul>
      </div>
      <div class="hc_footer">
        <el-button @click="goNext"  style="margin-left:2.26rem" class="btn_confirm">下一步</el-button>
        <el-button style="margin-left:0.94rem" @click="goback" class="btn_cancel">返回</el-button>
      </div>
    </div>
    <MoreQuestion v-if="isShow"></MoreQuestion>
  </div>
</template>
<script>
import MoreQuestion from "./moreQuestion";
export default {
  name: "Question",
  components: {
    MoreQuestion,
  },
  data() {
    return {
      isShow: false,
      list: [
        {
          val: "生活水平",
          isChecked: true,
        },
        {
          val: "品牌实力",
          isChecked: false,
        },
        {
          val: "学习成长",
          isChecked: true,
        },
        {
          val: "收入丰厚",
          isChecked: false,
        },
        {
          val: "工作自主",
          isChecked: false,
        },
        {
          val: "适合度",
          isChecked: false,
        },
        {
          val: "自由晋级",
          isChecked: false,
        },
        {
          val: "发展空间",
          isChecked: false,
        },
        {
          val: "社会贡献",
          isChecked: false,
        },
        {
          val: "荣誉奖励",
          isChecked: false,
        },
      ],
    };
  },
<<<<<<< HEAD
  created() {
     if(this.$route.query.state){
      this.isShow = !this.isShow;
    }
  },
=======
>>>>>>> 09b868de12a5afa443c39651869023e16bdba3ca
  methods: {
    goNext() {
      this.isShow = !this.isShow;
    },
    seleBtnFn(item) {
      item.isChecked = !item.isChecked;
    },
    goback() {
      this.$parent.facetofaceFn();
    },
  },
};
</script>
<style scoped>
.flex_unit >>> .el-button:focus,
.el-button:hover {
  background: none;
}
.flex_unit {
  height: 100%;
}
</style>
<style lang="less" scoped>
.home_r {
  font-size: 0.18rem;
  flex: auto;
  .hc_tit {
    padding: 0.5rem 0 0.2rem;
    font-family: "PingFangSC-Semibold";
    text-align: center;
    font-size: 0.18rem;
    color: #d41045;
  }
  .qe_tit {
    text-align: left;
    padding: 0 0.5rem;
    font-size: 0.14rem;
    color: #5a6b80;
    margin-bottom: 0.21rem;
    span {
      color: #d41045;
    }
  }
  .unit_list {
    display: flex;
    margin-left: 0.5rem;
    flex-wrap: wrap;
    li {
      min-width: 2.16rem;
      width: 2.16rem;
      height: 0.44rem;
      border: 1px solid #cccccc;
      border-radius: 0.22rem;
      font-size: 0.18rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666666;
      margin-bottom: 0.16rem;
      margin-right: 0.41rem;
<<<<<<< HEAD
    }
    li:nth-child(2n) {
      margin-right: 0;
    }
    li.active {
      background:rgba(255,224,224,1);
      color: #D41045;
      border-color:rgba(255,224,224,1);
=======
>>>>>>> 09b868de12a5afa443c39651869023e16bdba3ca
    }
    li:nth-child(2n) {
      margin-right: 0;
    }
    li.active {
      background:rgba(255,224,224,1);
      color: #D41045;
      border-color:rgba(255,224,224,1);
    }
  }
  .an_wrap {
    height: calc(100% - 1.91rem);
    overflow-y: auto;
  }
  .an_wrap {
    height: calc(100% - 1.91rem);
    overflow-y: auto;
  }
  .hc_footer {
    display: flex;
    justify-content: center;
    .btn_confirm {
      background: #d41045;
      border-radius: 0.04rem;
      border-radius: 0.04rem;
      color: #fff;
      width: 1.6rem;
      margin: 0 0.2rem;
    }
  }
}
</style>